<!--
 * @author: 十一
 * @since: 2024-04-06
 * user-list.vue
 * @desc: new page
-->
<template>
  <!-- <PageHeader title="角色管理"></PageHeader> -->
  <!-- <Construction/> -->
  <PageHeader title="角色管理">
    <template v-slot:S1>
      <a-button key="2">
        <template #icon>
          <i class="iconfont icon-content icon-shuaxin mr-2"></i>
        </template>
        刷新</a-button>
      <a-button key="1" type="primary" @click="showDrawer(0, {})">新增</a-button>
    </template>
  </PageHeader>
  <WangEditor/>
  <!-- <a-table :dataSource="dataSource" :columns="columns" bordered :pagination="false">
    <template #bodyCell="{ column, value }">
      <template v-if="column.key === 'operation'">
        <a-tag color="#2db7f5" style="cursor: pointer" @click="showDrawer(1, value)">编辑</a-tag>
        <a-tag color="#f50" style="cursor: pointer">删除</a-tag>
      </template>
    </template>
  </a-table> -->
  <br />
  <a-pagination v-model:current="current" :total="500" style="float: right" />
  <RoleComponents ref="roleComponents" />
</template>

<script lang="ts" setup>
import PageHeader from '@/components/pageHeader.vue'
import RoleComponents from './components/role-components.vue'
import WangEditor from '@/components/WangEditor/index.vue'
import { ref, reactive, h } from 'vue'

const dataSource = [
  {
    key: '1',
    roleName: '管理员',
    roleDesc: '管理员备注信息'
  },
  {
    key: '1',
    roleName: '子管理员',
    roleDesc: '子管理员备注信息'
  }
]

const columns = [
  {
    title: '角色名称',
    dataIndex: 'roleName',
    key: 'roleName'
  },
  {
    title: '角色描述',
    dataIndex: 'roleDesc',
    key: 'roleDesc'
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 140
  }
]
const current = ref(1)
const roleComponents = ref()
const drawerOptions = reactive({
  title: '新增角色',
  options: {}
})

function showDrawer(state: number, value: any) {
  console.log('111111')
  if (state == 0) {
    drawerOptions.title = '新增角色'
  } else {
    drawerOptions.title = '编辑角色'
    drawerOptions.options = value
  }
  roleComponents.value.showDrawer(drawerOptions)
}
</script>

<style lang="less" scoped></style>
